import { View, Text, StyleSheet, Platform, Image } from "react-native"
import { BookOpen, CheckCircle2, Clock, Star } from "lucide-react-native"

interface DayPlan {
    day: number
    status: string
    newWords: number
    reviewWords: number
}

interface PlanTimelineProps {
    title: string
    description: string
    days: DayPlan[]
}

export function PlanTimeline({ title, description, days }: PlanTimelineProps) {
    // 确保所有数值都是有效数字，防止NaN显示
    const safeNumber = (num: any): number => {
        const parsed = Number.parseInt(num)
        return isNaN(parsed) ? 0 : parsed
    }

    return (
        <View style={styles.learningPlanContainer}>
            {/* 标题区域 */}
            <View style={styles.headerContainer}>
                <Image source={{ uri: "https://cdn-icons-png.flaticon.com/512/2436/2436636.png" }} style={styles.headerIcon} />
                <View style={styles.headerTextContainer}>
                    <Text style={styles.learningPlanTitle}>{title}</Text>
                    <Text style={styles.learningPlanDesc}>{description}</Text>
                </View>
            </View>

            {/* 彩虹装饰 */}
            <View style={styles.rainbowDecoration}>
                <View style={[styles.rainbowStripe, { backgroundColor: "#FF9500" }]} />
                <View style={[styles.rainbowStripe, { backgroundColor: "#34C759" }]} />
                <View style={[styles.rainbowStripe, { backgroundColor: "#5AC8FA" }]} />
                <View style={[styles.rainbowStripe, { backgroundColor: "#AF52DE" }]} />
            </View>

            {/* 时间线 */}
            <View style={styles.timeline}>
                {days.map((day, index) => {
                    // 确保数值有效
                    const newWords = safeNumber(day.newWords)
                    const reviewWords = safeNumber(day.reviewWords)
                    const isActive = day.status === "进行中"

                    return (
                        <View key={index} style={styles.timelineItem}>
                            {/* 左侧日期卡片 */}
                            <View style={[styles.dayCard, isActive && styles.dayCardActive]}>
                                <View style={styles.dayNumberContainer}>
                                    <Text style={[styles.dayNumber, isActive && styles.dayNumberActive]}>{day.day}</Text>
                                </View>
                                <View style={[styles.statusBadge, isActive && styles.statusBadgeActive]}>
                                    {isActive ? (
                                        <Star size={8} color="#FFFFFF" style={styles.statusIcon} />
                                    ) : (
                                        <Clock size={8} color="#FFFFFF" style={styles.statusIcon} />
                                    )}
                                    <Text style={styles.statusText}>{day.status}</Text>
                                </View>
                            </View>

                            {/* 右侧内容卡片 */}
                            <View style={[styles.contentCard, isActive && styles.contentCardActive]}>
                                {/* 新学单词 */}
                                <View style={styles.wordSection}>
                                    <View style={styles.iconContainer}>
                                        <BookOpen size={12} color={isActive ? "#FF9500" : "#ADB5BD"} />
                                    </View>
                                    <View style={styles.wordContent}>
                                        <Text style={styles.wordLabel}>新学单词</Text>
                                        <Text style={[styles.wordCount, isActive && styles.wordCountActive]}>{newWords}</Text>
                                    </View>
                                </View>

                                {/* 分隔线 */}
                                <View style={[styles.contentDivider, isActive && styles.contentDividerActive]} />

                                {/* 复习单词 */}
                                <View style={styles.wordSection}>
                                    <View style={styles.iconContainer}>
                                        <CheckCircle2 size={12} color={isActive ? "#FF9500" : "#ADB5BD"} />
                                    </View>
                                    <View style={styles.wordContent}>
                                        <Text style={styles.wordLabel}>复习单词</Text>
                                        <Text style={[styles.wordCount, isActive && styles.wordCountActive]}>{reviewWords}</Text>
                                    </View>
                                </View>
                            </View>

                            {/* 连接线 */}
                            {index < days.length - 1 && <View style={[styles.connector, isActive && styles.connectorActive]} />}
                        </View>
                    )
                })}
            </View>

            {/* 底部装饰 */}
            <View style={styles.footerDecoration}>
                <Image source={{ uri: "https://cdn-icons-png.flaticon.com/512/3406/3406999.png" }} style={styles.footerImage} />
                <Text style={styles.footerText}>坚持学习，每天进步！</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    learningPlanContainer: {
        backgroundColor: "#FFFFFF",
        borderRadius: 16,
        padding: 12,
        marginBottom: 16,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0,0,0,0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.2,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    headerContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 10,
    },
    headerIcon: {
        width: 28,
        height: 28,
        marginRight: 8,
    },
    headerTextContainer: {
        flex: 1,
    },
    learningPlanTitle: {
        fontSize: 16,
        fontWeight: "700",
        color: "#333333",
        marginBottom: 2,
    },
    learningPlanDesc: {
        fontSize: 12,
        color: "#666666",
        lineHeight: 16,
    },
    rainbowDecoration: {
        flexDirection: "row",
        height: 4,
        borderRadius: 2,
        marginBottom: 12,
        overflow: "hidden",
    },
    rainbowStripe: {
        flex: 1,
        height: "100%",
    },
    timeline: {
        paddingHorizontal: 2,
    },
    timelineItem: {
        flexDirection: "row",
        marginBottom: 14,
        position: "relative",
    },
    dayCard: {
        width: 50,
        backgroundColor: "#F8F9FA",
        borderRadius: 10,
        padding: 6,
        alignItems: "center",
        marginRight: 8,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0,0,0,0.05)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.1,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    dayCardActive: {
        backgroundColor: "#FFF3E0",
        borderWidth: 1,
        borderColor: "#FFE8CC",
    },
    dayNumberContainer: {
        width: 24,
        height: 24,
        borderRadius: 12,
        backgroundColor: "#EEEEEE",
        justifyContent: "center",
        alignItems: "center",
        marginBottom: 4,
    },
    dayNumber: {
        fontSize: 14,
        fontWeight: "700",
        color: "#666666",
    },
    dayNumberActive: {
        color: "#FF9500",
    },
    statusBadge: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#ADB5BD",
        borderRadius: 8,
        paddingHorizontal: 4,
        paddingVertical: 1,
    },
    statusBadgeActive: {
        backgroundColor: "#FF9500",
    },
    statusIcon: {
        marginRight: 1,
    },
    statusText: {
        fontSize: 8,
        color: "#FFFFFF",
        fontWeight: "500",
    },
    contentCard: {
        flex: 1,
        backgroundColor: "#F8F9FA",
        borderRadius: 12,
        padding: 8,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderWidth: 1,
        borderColor: "#EEEEEE",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0,0,0,0.05)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.1,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    contentCardActive: {
        backgroundColor: "#FFF9EB",
        borderColor: "#FFE8CC",
    },
    wordSection: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 4,
    },
    iconContainer: {
        width: 22,
        height: 22,
        borderRadius: 11,
        backgroundColor: "#EEEEEE",
        justifyContent: "center",
        alignItems: "center",
        marginRight: 4,
    },
    wordContent: {
        flex: 1,
    },
    wordLabel: {
        fontSize: 10,
        color: "#666666",
        marginBottom: 1,
    },
    wordCount: {
        fontSize: 14,
        fontWeight: "700",
        color: "#333333",
        // paddingLeft:10,
    },
    wordCountActive: {
        color: "#FF9500",
    },
    contentDivider: {
        width: 1,
        height: "70%",
        backgroundColor: "#DDDDDD",
        marginHorizontal: 4,
    },
    contentDividerActive: {
        backgroundColor: "#FFD8A8",
    },
    connector: {
        position: "absolute",
        left: 25,
        top: 50,
        width: 2,
        height: 14,
        backgroundColor: "#DDDDDD",
    },
    connectorActive: {
        backgroundColor: "#FFD8A8",
    },
    footerDecoration: {
        alignItems: "center",
        marginTop: 10,
        paddingTop: 10,
        borderTopWidth: 1,
        borderTopColor: "#F0F0F0",
    },
    footerImage: {
        width: 24,
        height: 24,
        marginBottom: 4,
    },
    footerText: {
        fontSize: 12,
        color: "#999999",
        fontStyle: "italic",
    },
})

